<template>
	<div class="lc_wrap">
		<el-row class="abnormal swaqAbnormal">
			<el-col :span="leftWidth">
				<div class="box treeBox">
					<basic-container>
						<lcTree @ready="ready" :deviceType='systemInfo.treeType'></lcTree>
					</basic-container>
				</div>
			</el-col>
			<el-col :span="rightWidth" class="table-wrapper">
				<overlay @changeTreeBox="changeTreeBox"></overlay>
				<basic-container>
					<el-form :inline="true" class="demo-form-inline" size="small">
						<el-form-item>
							<el-date-picker style="width: 150px;" v-model="query.start" type="date" size="small" placeholder="开始日期" :picker-options="pickerOption" value-format="yyyy-MM-dd">
							</el-date-picker>
							&nbsp;至&nbsp;
							<el-date-picker style="width: 150px;" v-model="query.end" type="date" size="small" placeholder="结束日期" :picker-options="pickerOption" value-format="yyyy-MM-dd">
							</el-date-picker>
							&nbsp;&nbsp;
						</el-form-item>

						<el-form-item label="设备名称">
							<el-input v-model="query.Id" placeholder="请输入内容"></el-input>
						</el-form-item>
						<!--搜索按钮-->
						<el-form-item label="" style="margin-left: 10px;">
							<el-button type="primary" size="small" icon="el-icon-search" @click="searchBtn">搜 索</el-button>
							<el-button type="" size="small" icon="el-icon-delete" @click="searchReset">清 空</el-button>
						</el-form-item>
					</el-form>

					<avue-crud ref="crud" v-model="form" :option="option" :table-loading="loading" :data="data" :page.sync="page" @refresh-change="refreshChange" @search-change="searchChange" @selection-change="selectionChange" @current-change="currentChange" @size-change="sizeChange" @search-reset="searchReset">
						<template slot="menu">
							<el-link  type="primary" icon="el-icon-view" 
								style="font-size: 12px;margin-right: 8px;" :underline="false">
								查看 
							</el-link>
							<el-link  type="primary" icon="el-icon-download" style="font-size: 12px;margin-right: 8px;" 
								:underline="false">
								下载
							</el-link>		
							<el-link  type="primary" icon="el-icon-delete" style="font-size: 12px;margin-right: 8px;" 
								:underline="false">
								删除
							</el-link>							
						</template>

					</avue-crud>

					<el-dialog title="照片抓拍" :visible.sync="photoShow" width="30%" :append-to-body="true">
						<img src="/img/bg/bg1.jpg" alt="" width="100%" />
						<span slot="footer" class="dialog-footer">					    
					      <el-button type="primary" @click="photoShow = false">确 定</el-button>
					    </span>
					</el-dialog>
				</basic-container>
			</el-col>
		</el-row>
	</div>
</template>
<script>
	import { getList } from "@/api/psoa32/wholeProcess";
	import { getToken } from "@/util/auth";
	import lcTree from "@/components/common/tree.vue";
	import overlay from "@/components/common/overlay.vue";
	import mixmin from '@/config/mixmin'
	import { column3 } from "@/views/psoa32/wholeProcess/option/column.js"
	export default {
		components: {
			lcTree,
			overlay
		},
		data() {
			return {
				photoShow: false,
				form: {},
				query: {
					Id: '',
					end: '',
					relieveWay: '',
					start: '',
					userName: ''
				},
				relieveWay: [{
					dictValue: '人脸识别',
					dictKey: '1'
				}, {
					dictValue: '远程智控',
					dictKey: '2'
				}],
				loading: false,
				option: {
					addBtn: false,
					editBtn: false,
					delBtn: false,
					tip: false,
					searchShow: true,
					searchMenuSpan: 6,
					border: true,
					index: true,
					dialogClickModal: false,
					selection: false,
					menu: true,
					column: column3
				},
				data: [],
				pickerOption: {
					firstDayOfWeek: 1,
					disabledDate(time) {
						return time.getTime() > Date.now()
					},
				},
				nodeId: null,
				deptInfoName: '',
				deptInfoId: '',
				treeType: null
			}
		},
		mixins: [mixmin],
		methods: {
			handleExport() {
				this.$confirm("是否导出报表数据?", "提示", {
					confirmButtonText: "确定",
					cancelButtonText: "取消",
					type: "warning"
				}).then(() => {
					let str = `api/squirrel-psoa-hebei/access/export?${
			        this.website.tokenHeader
			        }=${getToken()}&Id=${this.query.Id}&end=${
			        this.query.end}&relieveWay=${this.query.relieveWay}&start=${this.query.start}&userName=${this.query.userName}`
					window.open(str);
				});
			},
			ready(data, treeData) {
				this.treeType = data.nodeType
				this.nodeId = data.key
				this.deptInfoName = data.title
				this.deptInfoId = data.id
				this.page.currentPage = 1
				this.onLoad()
			},
			//自定义搜索清空事件
			searchReset() {
				this.query = {
					Id: '',
					end: '',
					relieveWay: '',
					start: '',
					userName: ''
				};
				this.page.currentPage = 1
				this.onLoad();
			},
			searchBtn() {
				this.page.currentPage = 1
				this.onLoad()
			},
			onLoad() {
				this.loading = true;
				let params = Object.assign({}, this.query, {
					current: this.page.currentPage,
					size: this.page.pageSize
				})
				getList(params).then(res => { //状态类型下拉this.statusType
					this.data = res.data.data.records
					this.loading = false;
				})
			}
		}
	};
</script>

<style lang="scss" scoped>
	.box {
		height: 100%;
		margin-bottom: 0;
	}
	
	.el-row {
		height: calc(100% - 20px);
	}
	
	.el-col {
		height: 100%;
		overflow: auto;
	}
</style>